<template>
<div>
  <el-button icon="el-icon-refresh" @click="getFileList" type="primary">刷新</el-button>
  <el-table :data="fileList">
    <el-table-column>
      <template v-slot="{row,$index}">
        {{row.fileName}}
      </template>
    </el-table-column>
    <el-table-column>
      <template v-slot="{row,$index}">
<!--        <el-button icon="el-icon-download" @click="downloadFile(`/api/file/download?fileName=${row}`,row)">-->
        <el-button icon="el-icon-download" @click="downloadFile(`/api/file/download2?fileId=${row.id}&source=FILE&userId=${userInfo.id}`,row)">
<!--          <a :href="`/api/file/download?fileName=${row}`" target="_blank">下载</a>-->
          下载
        </el-button>
        <el-button type="primary" icon="el-icon-delete" @click="deleteFile(`${row.id}`)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script>
import {mapState} from "vuex";
import {requestIsSuccess} from "@/api/request";

export default {
  name: "FileList",
  data(){
    return{
      // fileList:[]
    }
  },
  methods: {
    getFileList() {
      this.$store.dispatch("getFileListByToken")
    },
    downloadFile(href,title) {
      const a = document.createElement('a');
      a.setAttribute('href', href);
      // a.setAttribute('download', title);
      a.setAttribute('target', "_blank");
      //todo 设置header
      a.click();
    },
    async deleteFile(id) {
      const result = await this.$store.dispatch("deleteFile", {id, source: "FILE"});
      if(requestIsSuccess(result))
        await this.$store.dispatch("getFileListByToken");
    }
  },
  mounted() {
    // this.getFileList()
    this.getFileList()
  },
  computed:{
    ...mapState({
      // fileList:'files/fileList'
      fileList:(state)=>state.files.fileList,
      userInfo:(state)=>state.user.userInfo
    })
  }
}
</script>

<style scoped>

</style>